<template>
    <div>
        <header-footer :commonData="{$parent:$parent}" v-if="showLists">
            <div class="confirmOrder" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="f_left">当前位置：</li>
                        <li class="f_left">
                            <router-link to="/index">首页></router-link>
                        </li>
                        <li class="f_left">在线开票</li>
                    </ul>
                </div>
                <div class="border_content text_center">
                    <img src="../../../static/img/title4.png" width="1150px" height="60px">
                    <div class="confirm_order_box text_left color666">
                        <p>订单号：{{$route.params.tradeNo}}
                            <span style="padding-left: 30px;">总价：{{sumPrice}}元</span>
                        </p>
                        <table width="100%" class="confirm_order_table text_center">
                            <thead>
                                <tr>
                                    <td width="100px">姓名</td>
                                    <td width="190px">身份证</td>
                                    <td>项目类别</td>
                                    <td>专业（工种）</td>
                                    <td v-if="faceTiPrev=='jxtzg'">是否参加体检预约</td>
                                    <td>备注</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in applyLst" :key="index">
                                    <td width="100px">{{item.realName}}</td>
                                    <td width="190px">{{item.identity}}</td>
                                    <td>{{item.projectName}}</td>
                                    <td class="preWhite">{{item.majorName}}</td>
                                    <td v-if="faceTiPrev=='jxtzg'">{{parseInt(isTiPrev)==1?'是':'否'}}</td>
                                    <td>{{item.remark}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="confirm_order_btns" v-show="applyLst.length>0">
                        <a href="javascript:void(0)" class="error_refund" @click="dialogVisibleRefund = true">订单有误，我要退款</a>
                        <a href="javascript:void(0)" @click="confirmOrderFunc">订单无误，开票并确认订单</a>
                    </div>

                    <!-- 去开票 -->
                    <el-dialog title="确认发票信息" class="toInvoiceClass" :visible.sync="dialogVisibleInvoice" width="60%">
                        <ticketDialog @ticketDialogBtn="ticketDialogBtns" :type="1"></ticketDialog>
                    </el-dialog>

                    <!-- 退款 -->
                    <el-dialog class="refund_dialog dialog" title="提示" :visible.sync="dialogVisibleRefund" width="40%">
                        <div class="refund_dialog_content">
                            <img src="../../../static/img/wenxintishi.png" width="400px" height="72px">
                            <el-form ref="refundForm" :model="refundForm" label-width="100px" class="text_left" style="width: 400px;margin: 60px auto;margin-bottom: 100px;">
                                <el-form-item label="订单编号：">
                                    <p>{{$route.params.tradeNo}}</p>
                                </el-form-item>
                                <el-form-item label="退费原因：">
                                    <el-input type="textarea" cols="10" onkeyup="this.value=this.value.substring(0, 200)"
                                        placeholder="最多可输入200字!" v-model.trim="refundForm.reason"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleRefund = false">取 消</el-button>
                            <el-button type="primary" @click="refundConfirm(refundForm)">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    import ticketDialog from '../../components/invoice_lists.vue'
    export default {
        name: "confirm_order",
        data: function() {
            return {
                showLists: false,
                sumPrice: 0,
                refundForm: {
                    reason: ''
                },
                isTiPrev: 0,
                faceTiPrev: 0,
                applyLst: [],
                dialogVisibleRefund: false,
                dialogVisibleInvoice: false,
                tradeNo: this.$route.params.tradeNo,
                kid: this.$route.params.kid,
                interval: undefined
            }
        },
        beforeCreate: function() {
            document.title = "杭州市建筑业协会-报名成功";
        },
        created: function() {
            var that = this;
            document.title = "杭州市建筑业协会-报名成功";
        },
        mounted: function() {
            var that = this;
            //确认订单
            this.common.post(this.api.confirm_order, {
                kid: this.kid,
                tradeNo: this.tradeNo
            }, function(res) {
                that.common.toPage("/apply/apply_success/" + that.tradeNo);
            });

            // this.isTiPrev = localStorage.getItem("isTiPrev");
            // this.faceTiPrev = localStorage.getItem("faceTiPrev");
            // this.common.post(this.api.getUsersApplyByTradeNo, {
            //     tradeNo: this.tradeNo
            // }, function(res) {
            //     var a = res.resultMap;
            //     // var sPrice = 0;
            //     a.forEach(function(v, i) {
            //         v.majorName = v.majorName.replaceAll(",", "\n");
            //         // sPrice += parseFloat(v.applyPrice);
            //     });
            //     that.sumPrice = res.ext;
            //     that.applyLst = a;
            //     if (res.resultMap == undefined || res.resultMap.length <= 0) {
            //         that.common.toPage("/404");
            //     }
            // }, function() {
            //     that.common.toPage("/404");
            // });
        },
        methods: {
            confirmOrderFunc: function() {
                var that = this;
                this.dialogVisibleInvoice = true;
            },
            ticketDialogBtns: function(data) {
                var that = this;
                if (data == false) {
                    this.dialogVisibleInvoice = false;
                    return;
                }
                var dataForm = Object.assign({}, {
                    tradeNo: this.tradeNo
                }, data);
                this.common.post(this.api.comfirmTrade, dataForm, function(res) {
                    that.common.toPage("/apply/apply_success/" + that.tradeNo);
                });
            },
            refundConfirm: function(refundForm) {
                if (refundForm.reason == '') {
                    this.$message.error('请输入退款原因！')
                    return;
                }
                this.dialogVisibleRefund = false;
                var that = this;
                this.common.post(this.api.refundWithServicePrice, {
                    kid: this.kid,
                    tradeNo: this.tradeNo,
                    reason: refundForm.reason
                }, function(msg, minId, resultCode, resultMsg, ext) {
                    that.common.toPage("/apply/refund_success/" + that.tradeNo);
                });
            }
        },
        components: {
            headerFooter,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
    }
</style>
